<template>
  <div>
    <base-modal
      :title="$t('event.detail.components.dialog.text50')"
      :show.sync="visible"
      width="500px"
      class="edit-point-dialog"
    >
      <div class="base-modal-content">
        <p v-if="phoneUnique">
          <strong>{{$t('event.detail.components.dialog.text47')}}</strong
          >{{$t('event.detail.components.dialog.text48')}}
        </p>
        <p v-else>{{$t('event.detail.components.dialog.text49')}}</p>
      </div>
      <div slot="footer">
        <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" @click="handleConfirm">{{$t('common.base.makeSure')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import { ref } from 'vue';
import { createLinkman } from '@src/api/EventApi.js'
import { Message } from 'element-ui';

export default {
  props: {
    phoneUnique: {
      type: Boolean,
      default: false
    },
    workEvent: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['success'],
  setup(props, { emit }) {
    const visible = ref(false);

    const lmPhoneIsRepeat = ref(false);

    const openDialog = () => {
      visible.value = true;
    };

    const handleConfirm = async () => {
      try {
        const params = {
          force: true,
          linkman: {
            name: props.workEvent.lmName,
            phone: props.workEvent.lmPhone,
            customer: {
              id: props.workEvent.cusId
            }
          },
          eventId: props.workEvent.id
        }
        const { status } = await createLinkman(params);
        if (status !== 0) {
          visible.value = false;
          return Message.error(this.$t('common.base.saveFail'));
        }

        Message.success(this.$t('common.base.saveSuccess'));
        emit('success');
        
      } catch (error) {
        console.error('handleConfirm error', error);
      }
    };

    return {
      visible,
      lmPhoneIsRepeat,
      openDialog,
      handleConfirm,
    };
  },
};
</script>

<style lang="scss" scoped>
.base-modal-content {
  padding: 20px;
}
</style>
